<template>
	<view class="">
		<view class="info-con">
			<view class="row between b-b itemCon b-t">
				<view class="itemTitle">头像</view>
				<view class="row" @click="chooseImage">
					<u-avatar :src="userInfo.icon" size="90"></u-avatar>
					<u-icon name="arrow-right" color="#999999"></u-icon>
				</view>
			</view>
			<view class="row between b-b itemCon">
				<view class="itemTitle">昵称</view>
				<input type="text" value="" v-model="userInfo.nickName" class="input" />
			</view>
		</view>
		<view class="row between b-b itemCon" style="margin-top: 20upx;background: #FFFFFF;">
			<view class="itemTitle">手机号</view>
			<input type="text" disabled value="" v-model="userInfo.phone" class="input" />
		</view>
		<view class="tapBot" hover-class="hover-opacity" @tap="onConfirm">保 存</view>
		<mix-loading v-if="isLoading"></mix-loading>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userInfo: {},
			visibleCity: false,
			visibleDate:false,
			params: {
				province: true,
				city: true,
				area: true
			},
			dateparams: {
				year: true,
				month: true,
				day: true,
				hour: false,
				minute: false,
				second: false
			}
		};
	},
	onLoad() {
		this.loadUserInfo();
	},
	methods: {
		async loadUserInfo() {
			if (!uni.getStorageSync("uid")) {
				return;
			}
			const data = {
				uid: uni.getStorageSync("uid")
			};
			const res = await this.$request("user/info", data);
			if (res.result == 0) {
				this.userInfo = res.data;
			} else {
				this.$util.msg(res.resultNote);
			}
		},
		//   提交
		onConfirm() {
			this.$util.throttle(async () => {
				const data = this.userInfo;
				data.uid = uni.getStorageSync("uid");
				const res = await this.$request("user/edit", data, {showLoading: true});
				if (res.result == 0) {
					this.$util.msg("修改成功!");
					this.back();
				} else {
					this.$util.msg(res.resultNote);
				}
			});
		},
		//选择图片
		chooseImage() {
			uni.chooseImage({
				count: 1, //最多可以选择的图片张数，默认9
				sizeType: ["original", "compressed"], //original 原图，compressed 压缩图，默认二者都有
				sourceType: ["album", "camera"], //album 从相册选图，camera 使用相机，默认二者都有
				success: res => {
					console.log(res);
					this.uploadFiles(res.tempFiles);
				}
			});
		},
		//上传图片
		async uploadFiles(files) {
			console.log(files);
			const item = {
				filePath: files[0],
				progress: 0,
				type: 0
			};
			const result = await this.$uploadFile("user/upload", item);
			console.log(result);
			const res = JSON.parse(result);
			if (res.result == 0) {
				this.$util.msg("上传成功!");
				this.userInfo.icon = res.url;
			}
		}
	}
};
</script>
<style>
page {
	background: #f6f6f6;
}
</style>

<style scoped>
.info-con {
	background: #ffffff;
}
.itemCon {
	padding: 20upx;
}

.itemTitle {
	color: #000000;
	font-size: 28upx;
}

.userIcon {
	width: 90upx;
	height: 90upx;
	border-radius: 50%;
	margin-right: 20upx;
}

.input {
	height: 60upx;
	line-height: 60upx;
	text-align: right;
	padding-right: 20upx;
}

.icon-you {
	font-size: 24upx;
	margin-left: 20upx;
}
.tapBot {
	position: fixed;
	left: 25upx;
	bottom: 60upx;
	width: 700upx;
	height: 88upx;
	line-height: 88upx;
	text-align: center;
	background:#2781A7;
	border-radius: 44upx;
	font-size: 30upx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #ffffff;
}
</style>
